• 我們去買東西或辦事情，不時看到一些白目的人突然插隊說~

ㄟ小姐~我這東西很急，先幫我處理一下

• 此時排在後方的人，不來個白眼伺候就對不起自己啦!

• 當然，有Guts的行員就會大聲說~ 麻煩從最後一個排隊喔!謝謝!

• 沒錯，今天我們要介紹的concatAll就是有這樣的Guts，凡事照步來，沒跟你攀關係、走後門的，趕緊來認識一下它吧!

concatAll

圖片來源-RxJS官網-concatAll

• 從彈珠圖來看，concatAll就是一個一步一腳印的人，過程中不管有接收到多少個observables，他會先把手邊已訂閱的observable先執行完(注意!是執行完，執行不完就準備大塞車了!XD)，之後才會接手下一個訂閱。

case1:

• 我們一樣用前兩天點擊並回傳interval數: 0->->1->2的例子，修改為concatAll來看看！
  stackblitz

import { fromEvent, map, concatAll, interval, take, tap } from 'rxjs';

// case1:=== switchAll ===
console.log('=== case1: concatAll ===');
const timer$ = interval(1000).pipe(take(3));
fromEvent(document, 'click')
  .pipe(
    tap(() => console.log('click!')),
    map(() => timer$),
    concatAll() //<-- 
  )
  .subscribe(console.log);

解析

• 注意到了吧，過程中不管輸入觸發並回傳幾次observable，concatAll就是先把手邊的訂閱完成，才接手下一個，很實在，正所謂 ~ 吃多嚼不爛，正是它秉持的道理吧!

case2: 當然！還是要帥一波 concatMap

• 前兩天有好好練習的夥伴，對於帥一波應該不陌生，趕快來看一下!
  stackblitz

import { fromEvent, concatMap, interval, take, tap } from 'rxjs';

// === case2: concatMap ===
console.log('=== case2: concatMap ===');
const timer$ = interval(1000).pipe(take(3));
fromEvent(document, 'click')
  .pipe(
    tap(() => console.log('click!')),
    concatMap(() => timer$)  //<-- concatMap = concatAll + map
  )
  .subscribe(console.log);

✍Recap

• concatAll:

1. 先處理好手邊的observable直到結束後，才處理下一個observable的訂閱。
2. 當有一個observable尚未結束時，接收到的observable都會被放在queue之中，慢慢處理。
3. concatAll等同於mergeAll(1)

mergeAll(N)，括號內的變數N就是告訴mergeAll你再同一時間最多處理多少個observable，有趣吧!

好文章必推

• 我在學習concatAll、switchAll及mergeAll，一開始真的抓不著頭緒，多虧了J.H.Blog大大的文章，讓我秒懂觀念，在此幫他的好文推一下:

1. 30 天精通 RxJS (17)：Observable Operators - switch, mergeAll, concatAll
2. 30 天精通 RxJS (18)：Observable Operators - switchMap, mergeMap, concatMap

• 今天我們依舊輕鬆搞定28天，剩下最後兩天了，繼續攀向高峰!